<template>
	<view class="page-content">
		<view class="title" style="margin-bottom: 30px;">
			<view class="addBtn flex-center" style="border-radius: 20px;margin-bottom: 30px;" @click="toAdd">
				<image src="../../../static/wallet/addIcon.png" mode="" style="width: 20px;height: 20px;"></image>
				<text>添加票务代理</text>
			</view>

			<view class="flex-between" style="width: 100%;padding:0 15px;box-sizing:border-box;">
				<view class="red-btn flex-center" style="width: 120px;align-items: center;"
					:style="btnStatus==1?redBtn:whiteBtn" @click="clickStatusBtn(1)">
					合作中
				</view>
				<view class="white-btn flex-center" style="width: 120px;align-items: center;"
					:style="btnStatus==0?redBtn:whiteBtn" @click="clickStatusBtn(0)">
					停用中
				</view>
			</view>
		</view>

		<view class="list-box" style="min-height:calc(100vh - 203px) ;height:calc(100vh - 203px);overflow: auto;">
			<view v-for="(item,index) in listData" :key="index" class="list-item">
				<!-- 票务代理信息 -->
				<view class="header-box flex-between" style="margin-bottom: 15px;">
					<!-- 头像和昵称 -->
					<view class="flex-start">
						<view class="avatar-box flex-start" style="margin-right: 10px;">
							<image :src="item.avatar" mode="" style="width: 55px;height: 55px;"></image>
						</view>

						<view class="name-box">
							<view class="flex-start" style="margin-bottom: 12px;">
								<view>
									{{item.card_name}}
								</view>
								<view class="white-btn" style="font-size: 10px;padding: 2px 10px;margin-left:10px ;" v-if="item.state==1">合作中
								</view>
								
								<view class="white-btn" style="font-size: 10px;padding: 2px 10px;margin-left:10px ;"  v-if="item.state==0">停用中
								</view>
							</view>
							<view class="phone_num">
								{{item.mobile_phone}}
							</view>
						</view>
					</view>

					<view class="flex-start">
						余额：{{item.balance}}
					</view>

				</view>

				<!-- 票务信息 -->
				<view class="info-box" style="margin-bottom: 30px;">
					<view class="flex-start" style="margin-bottom: 5px;">
						<text style="width: 50%;">卡号：{{item.ticket_number}}</text>
						<text style="width: 50%;">折扣：{{item.discount}}</text>
					</view>
					<view class="flex-start" style="margin-bottom: 5px;">
						<text>限制单场报名人数：{{item.limit_people_num}}</text>
					</view>
					<view class="flex-start" style="margin-bottom: 5px;">
						<text>适用钓场：{{item.fish_id_name[0].fish_place_name}}</text>
					</view>
					<view class="flex-start">
						<text>累计销售鱼票：{{item.ticket_count}}</text>
					</view>
				</view>

				<!-- 按钮 -->
				<view class="btn-box">
					<view class="flex-between" style="width: 100%;padding:0;box-sizing:border-box;margin-bottom: 20px;">
						<view class="red-btn" style="padding: 7px 40px;border-radius: 17px;" @click="toUserDetail(item)">使用明细
						</view>
						<view class="red-btn" style="padding: 7px 40px;border-radius: 17px;" @click="toSellTicket">售票记录
						</view>
					</view>

					<view class="flex-center">
						<view class="white-btn"
							style="margin-right: 20px;flex:1;text-align: center;border-radius: 17px;" @click="toEdit">
							修改信息
						</view>

						<view class="white-btn" @click="inputDialogToggle"
							style="margin-right: 20px;flex:1;text-align: center;border-radius: 17px;">
							充值
						</view>


						<view class="white-btn" style="flex:1;text-align: center;border-radius: 17px;"
							@click="stopUser"  v-if="item.state==1">
							停用
						</view>
						<view class="white-btn" style="flex:1;text-align: center;border-radius: 17px;"
							@click="openUser"  v-if="item.state==0">
							启用
						</view>
					</view>

					<view>
						<!-- 普通弹窗 -->
						<uni-popup ref="popup" background-color="#fff" @change="popupChange">
							<view style="padding: 20px 10px;padding-bottom: 5px;">

								<view class="flex-between" style="margin-bottom: 15px;">
									<view style="width: 28px;">

									</view>
									<view style="font-size: 15px;font-weight: 600;flex:1;text-align: center;">票务卡充值
									</view>
									<view style="color: #f00;" @click="popupCancel">
										取消
									</view>
								</view>
								<view class="line">

								</view>
								<view class="flex-between" style="align-items: center;margin-bottom: 200px;">
									<view class="inputLabel">充值金额：</view>
									<input class="uni-input" type="number" v-model="ticketMoney" placeholder="请输入充值金额"
										style="flex: 1;border: 1px solid #f0f0f0;padding: 10px 10px;border-radius: 7px;" />
								</view>
								<view class="confirmBtn" @click="popupSubmit">
									确认
								</view>

							</view>


						</uni-popup>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get_ticket_agent
	} from '@/utils/ticketAgentApi/index.js'
	export default {
		data() {
			return {
				rechargeValue: '',
				listData: [{
					avatar: 'https://img3.redocn.com/20110418/20110416_6ad206b20544a083fdb0B6Kj0dud4sro.jpg',
					name: '老墨鱼票',
					phone_num: '18709871562',
					balance: '￥101155.55',
					cardNum: '459029243',
					discount: '8.5折',
					personNum: '',
					site: '',
					saleMoney: '',
					state:1
				}],
				btnStatus: 1,
				whiteBtn: {
					color: '#f00',
					background: '#fff'
				},
				redBtn: {
					background: '#D43030',
					color: '#fff'
				}
			}
		},
		onReady() {
		this.getList()

		},
		methods: {
			toAdd() {
				uni.navigateTo({
					url: `/pages/fashingSite/ticketAgent/addTicket`
				})
			},
			toEdit() {
				uni.navigateTo({
					url: `/pages/fashingSite/ticketAgent/editTicket`
				})
			},
			toUserDetail(item) {
				let tick_id=item.tick_id
				uni.navigateTo({
					url: `/pages/fashingSite/ticketAgent/userDetail?tick_id=${tick_id}`
				})
			},
			toSellTicket() {
				uni.navigateTo({
					url: `/pages/fashingSite/ticketAgent/sellTicketRecord`
				})
			},
			inputDialogToggle() {
				this.$refs.popup[0].open('bottom')
			},
			popupChange(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
				this.$refs.inputDialog.close()
			},
			popupCancel() {
				this.$refs.popup[0].close()
			},
			popupSubmit() {
				this.$refs.popup[0].close()
			},
			stopUser() {
				uni.showToast({
					title: '停用成功',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'success',
					//显示持续时间为 2秒
					duration: 2000
				})
			},
			openUser() {
				uni.showToast({
					title: '启用成功',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'success',
					//显示持续时间为 2秒
					duration: 2000
				})
			},

			clickStatusBtn(val) {
				this.btnStatus = val
				this.getList()
			},
			getList(){
				// uni.setStorage({
				// 	key: 'userInfo',
				// 	data: {
				// 		business_id: 1
				// 	},
				// });
				get_ticket_agent({}).then(res => {
					if (res.code == 200) {
						let list = res.ticket_agent_list.filter(item => {
							item.discount = (item.discount * 10).toFixed(1) + '折'
							if (item.state == this.btnStatus) {
								return item
							}
						})
						this.listData = list
					}
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	.addBtn {
		align-items: center;
		font-size: 14px;
		font-weight: 600;
		width: 70%;
		background: #D43030;
		padding: 10px 0;
		margin: 20px auto;
		border-radius: 5px;
	}

	.title {
		font-size: 16px;
		color: #fff;
		text-align: center;
	}

	.white-btn,
	.red-btn {
		padding: 10px 15px;
		/* width: 120px; */
		color: #f00;
		border: 1px solid #D43030;
		border-radius: 5px;
	}

	.white-btn {
		/* padding: 7px 15px; */
		color: #f00;
		background: #fff;
	}

	.red-btn {
		background: #D43030;
		color: #fff;
	}

	.avatar-box {
		width: 55px;
		height: 55px;
		border-radius: 55px;
		overflow: hidden;
	}

	.list-box {
		font-size: 14px;
		padding: 0 10px;
		background: #F3F4F6;
		padding-top: 15px;
	}

	.list-item {
		margin-bottom: 15px;
		background: #fff;
		padding: 15px;
	}

	.line {
		border: 1px solid #f0f0f0;

		margin-bottom: 15px;
	}

	.confirmBtn {
		position: absolute;
		width: 70%;
		background: #D43030;
		bottom: 40px;
		left: 15%;
		height: 40px;
		color: #fff;
		text-align: center;
		line-height: 40px;
		border-radius: 10px;
	}

	.page-content {
		height: calc(100vh - 64px);
	}
</style>